<template>
  <headPage></headPage>
  <div class="seach-wrap">
    <el-form :inline="true" ref="" :model="params" label-width="100px">
      <el-row :span="24">
        <el-col :span="4">
          <el-form-item label="工号:">
            <el-input v-model="params.id" clearable style="width: 100%" placeholder="请输入工号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="用户名称:">
            <el-input v-model="params.name" clearable style="width: 100%" placeholder="请输入用户名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="菜单权限：">
            <el-radio-group v-model="params.status">
              <el-radio v-for="(item, index) in menu_option"
                               :label="item.value"
                               :key="index"
                               @click.native.prevent="customRadioClickHandler1(item)">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="数据权限：">
            <el-radio-group v-model="params.statusTable">
              <el-radio v-for="(item, index) in menu_option"
                        :label="item.value"
                        :key="index"
                        @click.native.prevent="customRadioClickHandler2(item)" >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button type="primary" v-loading.fullscreen.lock="loading"  @click="search">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div style="padding: .1rem .2rem">
    <el-table
        :data="dataItems"
        stripe
        :header-cell-style="{background:'#F5F7FA',color:'#333333'}"
        style="width: 100%;"
    >
      <el-table-column type="expand">
        <template #default="scope">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="菜单列表:">
              <div v-for="item in scope.row.menuEmpList" :key="item.menuId" class="menu-list-wrap">
                <span>{{ item.name }}</span>
              </div>
            </el-form-item>
          </el-form>
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="数据列表:">
              <div v-for="item in scope.row.tableAuthorizationList" :key="item.id" class="menu-list-wrap">
                <span>{{ item.tableChiName }}({{item.tableEngName}})</span>
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          prop="staffName"
          width="150"
          label="用户名称">
      </el-table-column>
      <el-table-column
          prop="staffAccount"
          width="150"
          label="工号">
      </el-table-column>
      <el-table-column
          prop="latnName"
          label="本地网">
      </el-table-column>
      <el-table-column
          prop="mktAreaName"
          label="三级单元">
      </el-table-column>
      <el-table-column
          prop="deptName"
          label="四级单元">
      </el-table-column>
      <el-table-column
          prop=""
          width="350"
          label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="updateItem(scope.row)">菜单权限</el-button>
          <el-button type="primary" size="small" @click="updateTableItem(scope.row)">数据权限</el-button>
          <el-button type="primary" size="small" @click="updateApproveItem(scope.row)">审批权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :current-page.sync="params.startIndex"
        :page-size="params.pageSize"
        :total="params.totalNum"
    >
    </el-pagination>
  </div>
  <el-dialog v-if="dialogUpdateleVisible" v-model="dialogUpdateleVisible" title="菜单权限管理" width="800" class="normal-dialog">
    <el-checkbox-group v-model="checkList">
      <el-checkbox
          v-for="(item,index) in allMenu"
          :key="index"
          :label="item.id"
          :disabled="item.disabled"
          :checked="item.checked">
        {{item.name}}
      </el-checkbox>
    </el-checkbox-group>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="checkList=[];dialogUpdateleVisible = false">取消</el-button>
        <el-button type="primary" v-loading.fullscreen.lock="loading" @click="menuSure">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-if="dialogDataVisible" v-model="dialogDataVisible" title="数据权限管理" width="800"  class="normal-dialog">
    <el-tree
        ref="data_ref"
        :data="tableTree"
        :props="props"
        node-key="tableName"
        :default-checked-keys="hasPowerList"
        :highlight-current="true"
        :default-expand-all="true"
        show-checkbox>
    </el-tree>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogDataVisible = false">取消</el-button>
        <el-button type="primary" v-loading.fullscreen.lock="loading" @click="tableSure">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-if="dialogApproveVisible" v-model="dialogApproveVisible" title="数据审批管理" width="800"  class="normal-dialog">
    <el-tree
        ref="approve_ref"
        :data="tableTree"
        :props="props"
        node-key="tableName"
        :default-checked-keys="hasApproveList"
        :highlight-current="true"
        :default-expand-all="true"
        show-checkbox>
    </el-tree>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogApproveVisible = false">取消</el-button>
        <el-button type="primary" v-loading.fullscreen.lock="loading" @click="approveSure">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { findUserList,
  findMenuList,
  saveUserMenu,
  findTableTree,
  saveUserDataTable,
  getTableApproveList,
  saveUserApproveDataTable} from '@/api/chartdb'
import consts from '../../common/consts'
import headPage from '../ui/headPage.vue'
import moment from 'moment'
import { ElMessage } from 'element-plus'

export default {
  name: 'empMenu',
  components: {
    headPage
  },
  props:{},
  data(){
    return {
      menu_option:consts.menu_option,
      menu_option_desc:consts.menu_option_desc,
      params:{
        name:'',
        id:'',
        status:'',
        statusTable:'',
        startIndex:1,
        pageSize:10,
        totalNum:0,
      },
      dataItems:[],
      sessionId:'',
      dialogUpdateleVisible:false,
      dialogDataVisible:false,
      dialogApproveVisible:false,
      currMenu:[],
      staffAccount:'',
      staffName:'',
      allMenu:[],
      checkList:[],
      checkTableList:[],
      checkApproveList:[],
      tableTree:[],
      hasPowerList:[],
      hasApproveList:[],
      curTableAuthorizationList:[],
      curTableApproveList:[],
      props:{
        children: 'children',
        label: 'title',
        id:'id',
        isLeaf: 'leaf'
      },
      loading:false,
    }
  },
  mounted() {
    this.findUserList();
    this.findMenuList();
    this.checkList=[]
    // this.getModelListInfo();
  },
  methods: {
    customRadioClickHandler1(item) {
      this.params.status = item.value === this.params.status ? '' : item.value
    },
    customRadioClickHandler2(item) {
      this.params.statusTable = item.value === this.params.statusTable ? '' : item.value
    },
    findTableTree(pid) {
      findTableTree({ pid: pid }).then((res) => {
        this.tableTree = res.data.data
      })
    },
    tableSure(){
      this.loading=true;
      this.checkTableList=this.$refs.data_ref.getCheckedKeys(true)
      let addParam=[]
      let delParam=[]
      this.checkTableList.forEach(item=>{
        console.log("item====>",item)
        if(!this.curTableAuthorizationList.some(e=>{return e.tableEngName==item})){
          addParam.push(item)
        }
      })
      this.curTableAuthorizationList.forEach(item=>{
        console.log("item====>",item)
        if(!this.checkTableList.some(e=>{return e==item.tableEngName})){
          delParam.push(item.tableEngName)
        }
      })
      console.log("addParam====>",addParam)
      console.log("delParam====>",delParam)
      saveUserDataTable({staffAccount:this.staffAccount,
        staffName:this.staffName,
        addTableList:addParam.join(","),
        delTableList:delParam.join(",")}).then((res) => {
        ElMessage({
          showClose: true,
          message: '保存成功！',
          type: 'success',
        })
        this.loading=false;
        this.dialogDataVisible = false;
        this.findUserList();
      })
    },
    approveSure(){
      this.loading=true;
      this.checkApproveList=this.$refs.approve_ref.getCheckedKeys(true)
      let addParam=[]
      let delParam=[]
      debugger
      this.checkApproveList.forEach(item=>{
        console.log("item====>",item)
        if(!this.curTableApproveList.some(e=>{return e.tableCode==item})){
          addParam.push(item)
        }
      })
      this.curTableApproveList.forEach(item=>{
        console.log("item====>",item)
        if(!this.checkApproveList.some(e=>{return e==item.tableCode})){
          delParam.push(item.tableCode)
        }
      })
      console.log("addParam====>",addParam)
      console.log("delParam====>",delParam)
      saveUserApproveDataTable({staffAccount:this.staffAccount,
        staffName:this.staffName,
        addTableList:addParam.join(","),
        delTableList:delParam.join(",")}).then((res) => {
        ElMessage({
          showClose: true,
          message: '保存成功！',
          type: 'success',
        })
        this.loading=false;
        this.dialogApproveVisible = false;
        this.findUserList();
      })
    },
    menuSure(){
      saveUserMenu({userId:this.staffAccount,menuIds:this.checkList.join(",")}).then((res) => {
        ElMessage({
          showClose: true,
          message: '保存成功！',
          type: 'success',
        })
        this.checkList=[];
        this.dialogUpdateleVisible = false;
        this.findUserList();
      })
    },
    mon(date){
      return moment(date).format("YYYY-MM-DD HH:mm:SS")
    },
    search(){
      this.params.startIndex=1
      this.findUserList()
    },
    findUserList(){
      this.loading=true
      findUserList(this.params).then((res) => {
        this.dataItems=res.data.data.records
        this.params.totalNum=res.data.data.total
        this.params.startIndex=res.data.data.current
        this.params.pageSize=res.data.data.size
        this.loading=false
      })
    },
    findMenuList(){
      findMenuList(this.params).then((res) => {
        this.allMenu=res.data.data
      })
    },
    handleCurrentChange:function (startIndex) {
      var vm = this;
      vm.params.startIndex = startIndex;
      vm.findUserList();
    },
    updateItem(item){
      this.currMenu=item.menuEmpList
      this.staffAccount=item.staffAccount
      this.staffName=item.staffName
      this.allMenu.forEach(item=>{
        item.disabled=false
        item.checked=false
        this.currMenu.forEach(currItem=>{
          if(item.id==currItem.menuId){
            item.checked=true
          }
        })
        if(item.path=="/"){
          item.disabled=true
          item.checked=true
        }else {
          item.disabled=false
        }
      })
      this.dialogUpdateleVisible=true
    },
    updateTableItem(item){
      this.staffAccount=item.staffAccount
      this.staffName=item.staffName
      this.hasPowerList=[]
      this.curTableAuthorizationList=item.tableAuthorizationList
      this.curTableAuthorizationList.forEach(item=>{
        this.hasPowerList.push(item.tableEngName)
      })
      this.findTableTree(0);
      this.dialogDataVisible=true
    },
    updateApproveItem(item){
      this.staffAccount=item.staffAccount
      this.staffName=item.staffName
      this.hasApproveList=[]
      getTableApproveList({staffAccount:this.staffAccount}).then((res) => {
        console.log("res====>",res.data.data.data)
        let data=res.data.data.data
        this.curTableApproveList=data
        data.forEach(item=>{
          this.hasApproveList.push(item.tableCode)
        })
        this.findTableTree(0);
      })

      this.dialogApproveVisible=true
    }
  }
}
</script>

<style lang="scss" scoped>
.seach-wrap{
  /*height: 0.5rem;*/
  /*display: flex;*/
  /*align-items: center;*/
  /*margin: 0.1rem 0.5rem;*/
  border-bottom: 1px solid #f1f1f1;
  /*justify-content: center;*/
  margin-top: 20px;
}
.el-pagination.is-background .el-pager li{
  margin-bottom: 0px !important;
}
.el-pagination{
  display: flex;
  align-items: center;
  margin-top: 5px;
  justify-content: flex-end;
}
.menu-list-wrap{
  background: rgb(208, 223, 255);
  color: rgb(92, 124, 255);
  margin-right: 0.1rem;
  margin-bottom: 0.05rem;
  padding: 0rem 0.1rem;
  border: 1px solid #5C7CFF;
  border-radius: 0.04rem;
  font-size: 12px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-footer{
  height: .3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-wrap{
  height: .3rem;
  display: flex;
  align-items: center;
  span{
    border-left: 4px solid #5C7CFF;
    height: .1rem;
    display: flex;
    align-items: center;
    padding-left: .05rem;
  }
}
</style>